
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        推荐内容
        <small>列表</small>
    </h1>
</section>

<style>
    .text-short{}
</style>

<!-- Main content -->
<section class="content" id="content_position_app">

    <div class="row">
        <div class="col-md-6">
            <a class="btn btn-default" @click="getList">刷新</a>
            <button class="btn btn-primary" @click="add">添加</button>
        </div>
        <div class="col-md-2">
            <div class="form-group">
            </div>
        </div>
    </div>

    <div class="row" v-show="!show.edit">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>推荐位</th>
                    <th>类型</th>
                    <th>标题</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.positionsStr}}</td>
                    <td>{{item.typesStr}}</td>
                    <td>【{{item.itemTypeStr}}】{{item.itemTitle}}</td>
                    <td>{{item.add_time}}</td>
                    <td>
                        <a class="btn btn-primary btn-xs" @click="edit(item)">修改</a>
                        <a class="btn btn-danger btn-xs" @click="del(item)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="page.rows" :last="page.last" v-model="page.page"></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-if="show.edit">
        <div class="col-md-4 col-md-offset-2">
            <h3>添加</h3>
            <div class="form" role="form">
                <div class="form-group">
                    <label>标题：</label>
                    <input class="form-control" v-model="forms.itemTitle">
                </div>
                <div class="form-group">
                    <label>图片：</label>
                    <file-uploader v-model="forms.itemImg" filetype="image" oss="true" policyUrl="/alioss/get_policy"></file-uploader>
                </div>
                <div class="form-group">
                    <label>链接：</label>
                    <input class="form-control" v-model="forms.itemUrl" placeholder="http://">
                </div>
                <div class="form-group">
                    <label>类型：</label>
                    <select class="form-control" v-model="forms.types">
                        <option value="1">内容</option>
                        <option value="2">广告</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>推荐位：</label>
                    <select class="form-control" v-model="forms.positions">
                        <option value="0">请选择</option>
                        <option v-for="(d, v, k) in positionsList" :value="v">{{d}}</option>
                    </select>
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="save">保存</a>
                    <a class="btn btn-default" @click="show.edit = false">关闭</a>
                </div>
            </div>
        </div>
    </div>

</section>
<!-- /.content -->

<script>
    var content_position_app = new Vue({
        el: '#content_position_app',
        data: {
            list: [],
            positionsList: [],
            page: {
                last: 1,
                page: 1,
                limit: 10
            },
            forms: {
                itemTitle:'',
                positions: 0,
                types: 2
            },
            show: {
                edit: false
            },
        },
        created: function () {
            this.getList();

            let self = this;
            ajax({
                uri: '/position/positions',
                success: function (resp) {
                    self.positionsList = resp.data;
                }.bind(this)
            })
        },
        methods: {
            getList(){ // 获取列表数据
                ajax({
                    uri: '/position/lists',
                    data: this.page,
                    success: function(resp){
                        console.log(resp);
                        this.list = resp.data;
                        resp.data.forEach(function (o, i) {
                            o.edit_enable = false;
                        });
                        this.list = resp.data;
                        this.page.last = resp.last_page;
                    }.bind(this)
                });
            },

            // 添加推荐内容
            add: function () {
                this.forms = {
                    positions: 0,
                    types: 2
                };
                this.show.edit = true;
            },

            // 编辑推荐内容
            edit: function (item) {
                this.forms = Object.assign({}, item);
                console.log(this.forms);
                this.show.edit = true;
            },

            // 保存推荐内容
            save: function () {
                let self = this;
                if (self.forms.itemTitle=='') {
                    alert('请输入标题');
                    return false;
                }
                if (self.forms.types==0) {
                    alert('请选择推荐内容类型');
                    return false;
                }
                if (self.forms.positions==0) {
                    alert('请选择推荐位');
                    return false;
                }

                if (self.forms.itemImg=='') {
                    alert('请上传图片');
                    return false;
                }

                ajax({
                    uri: '/position/save',
                    data: this.forms,
                    success: function (resp) {
                        this.show.edit = false;
                        this.getList();
                    }.bind(this)
                })
            },

            // 删除
            del: function (item) {
                ajax({
                    uri: '/position/del',
                    data: {id: item.id},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            }
        },

        watch: {
            'page.page': function (nv, ov) {
                this.getList();
            }
        }
    })
</script>
